<template>
	<div class="internal-detail">
		<div class="internal-detail-top">
			<div class="internal-detail-top-cont" :style="{'background-image': 'url(' + storeInfo.bg_img + ')'}">
				<div class="internal-detail-top-text">{{storeInfo.shop_name}}</div>
			</div>
			<div class="internal-detail-top-msg"> 
				<div class="internal-detail-top-tip">
					<span v-if="userInfo.rel_num > 0">由内部员工经过<span class="internal-share-num">{{userInfo.rel_num}}</span>位好友分享给我</span>
					<span v-else>由内部员工直接分享给我</span>
				</div>
				<div class="internal-top-img-cont">
					<div class="top-img-item top-staff-img" @click="showStaffPop">
						<img :src="staffInfo.headimgurl" mode="scaleToFill"/>
						<div class="top-staff-v"></div>
					</div>
					<div class="top-img-item-right"></div>
					<!-- 只展示第一个和最后一个 -->
					<div class="top-img-item-more" v-for="(item, index) in imgList" :key="index" v-if="index<1 || index==imgList.length-1">
						<div class="top-img-item">
							<img :src="item.headimgurl" mode="scaleToFill"/>
						</div>
						<div class="top-img-item-right"></div>
					</div>
					<wx-button open-type="share" class="wx-btn-share">
						<div class="top-img-item-share" @click="internalShare"></div>
					</wx-button>
				</div>
			</div>
			<div class="internal-detail-have">
				<div class="internal-detail-have-qu">
					<div class="internal-detail-have-top">
						<span>持有<span class="internal-detail-have-top-num">{{userInfo.coupon_num}}</span>张内购券</span>
					</div>
					<div class="internal-detail-have-tip">
						<span>{{userInfo.coupon_delay_string}}</span>
					</div>
				</div>
				<div class="internal-detail-have-more" @click="showCouponPop">
					<van-button round class="btn-more">获取更多</van-button>
				</div>
			</div>
		</div>
		<div class="internal-list-cont" v-show="itemList.length">
			<van-list v-model="loading"
                :error.sync="error"
                error-text="请求失败，点击重新加载"
                :finished="finished"
                @load="getUmpNGItemListFn">
				<div class="internal-list-item" v-for="(item, index) in itemList" :key="index" @click="navToDetail(item)">
					<div class="internal-list-item-img fl">
						<img :src="item.img_path" mode="scaleToFill">
					</div>
					<div class="internal-list-item-cont fl">
						<div class="internal-list-item-title">
							<span>{{item.title}}</span>
						</div>
						<div class="internal-list-item-qu-cont" v-if="item.ng_remark">
							<span>{{item.ng_remark}}</span>
						</div>
						<div class="internal-list-item-price">
							<div class="internal-list-price-item qyj">
								<div class="price-cont" v-html="scaleGoodsPriceFn(item.ng_price)"></div>
								<div class="price-tip">
									<span>亲友内购价</span>
								</div>
							</div>
							<div class="internal-list-price-item gfj">
								<div class="price-cont">¥&nbsp;{{item.price}}</div>
								<div class="price-tip">
									<span>售价</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</van-list>
		</div>
		<van-popup class="coupon-popup" v-model="isShowCoupon" position="bottom" round :style="{ height: '70%' }" @cancel="hideCouponPop">
			<div class="item-coupon-top">
				<span>获取更多内购券，抢超值内购商品</span>
			</div>
			<div class="item-coupon-main">
				<div class="item-coupon-share">
					<div class="item-coupon-share-img"></div>
					<div class="item-coupon-share-cont">
						<div class="item-coupon-share-cont-top">
							<span>好友助力</span>
						</div>
						<div class="item-coupon-share-cont-tip">
							<span>{{shareTip}}</span>
						</div>
					</div>
					<wx-button open-type="share" class="wx-btn-share"><van-button round class="item-coupon-share-btn">去邀请</van-button></wx-button>
				</div>
				<div class="item-coupon-list-title" v-show="logList.length>0">
					<span>——  亲友内购券记录 ——</span>
				</div>
				<div class="item-coupon-list-cont">
					<div class="item-coupon-list-item" v-for="(item, index) in logList" :key="index">
						<div class="item-coupon-list-item-left">
							<div class="item-coupon-list-item-title">
								<span>{{item.type_string}}</span>
							</div>
							<div class="item-coupon-list-item-time">
								<span>{{item.created_at}}</span>
							</div>
						</div>
						<div class="item-coupon-list-item-quan">
							<span>{{item.num_string}}</span>
						</div>
					</div>
				</div>
			</div>
		</van-popup>
		<van-popup v-model="isShowChaNum" class="cha-num-popup">
			<div class="ngq-pop-cont">
				<div class="ngq-pop-cont-top">
					<div class="ngq-pop-cont-top-title">
						<span>您还差</span><span>{{ chaNum }}</span><span>张内购券可以参与内购</span>
					</div>
					<div class="ngq-pop-cont-top-tip">
						<span>{{shareTip}}</span>
					</div>
				</div>
				<div class="ngq-pop-cont-img"></div>
				<div class="nav-pop-cont-btn">
					<wx-button open-type="share" class="wx-btn-share">
						<van-button round class="btn btn-share">邀请好友</van-button>
					</wx-button>
					<van-button round class="btn btn-buy" @click="navToBuyGood">直接购买</van-button>
				</div>
			</div>
			<div class="ngq-pop-close" @click="closeShowChaNum"></div>
		</van-popup>
		<!-- 登录获得内购券弹窗 -->
		<van-popup v-model="isShowLogin" class="login-num-popup">
			<div class="ngq-pop-cont">
				<div class="ngq-pop-cont-top">
					<div class="ngq-pop-cont-top-title">
						<span>{{popupInfo.title}}</span>
					</div>
					<div class="ngq-pop-cont-top-tip">
						<span>{{popupInfo.content}}</span>
					</div>
				</div>
				<div class="ngq-pop-cont-img"></div>
				<div class="nav-pop-cont-btn">
					<van-button round class="btn btn-know" @click="closeShowLogin">我知道了</van-button>
				</div>
			</div>
			<div class="ngq-pop-close" @click="closeShowLogin"></div>
		</van-popup>
		<van-popup v-model="isShowStaffPop" class="staff-popup">
			<div class="ng-staff-cont">
				<div class="ng-staff-img">
					<img :src="staffInfo.headimgurl">
				</div>
				<div class="ng-pop-cont-top">
					<div class="ng-pop-cont-top-title">
						<span>{{staffInfo.nickname}}</span>
					</div>
					<div class="ng-pop-cont-top-tip">
						<span>{{storeInfo.shop_name}}认证员工</span>
					</div>
				</div>
				<van-button round class="ng-pop-cont-btn" @click="closeStaffPop">我知道了</van-button>
			</div>
			<div class="ng-pop-close" @click="closeStaffPop"></div>
		</van-popup>
		<!-- h5分享图 -->
    <share-image ref="shareImage"></share-image>
     <!-- 授权弹出框 -->
    <small-login ref="smalllogin"></small-login>
	</div>
</template>

<script>
	import Vue from 'vue'
	import { getUmpNGBaseInfo, getUmpNGItemList, getUmpNGCouponLog } from '@/api/internal/internal'
	import { scaleGoodsPrice } from '@/utils/index'
	import shareImage from '@/components/wxShare/shareImage'
  import small from '@/smallapp/small'
  import SmallLogin from '@/components/SmallLogin/smallLogin'
	import {mpShare} from '@/utils/utils'
	export default Vue.extend({
	  components: {
			shareImage,
			SmallLogin
	  },
	  data() {
	    return {
	      isShowCoupon: false, // 获取更多内购券弹窗
	      isShowChaNum: false, // 内购券差额弹窗
	      isShowLogin: false, // 登录送券弹窗
	      isShowStaffPop: false, // 认证员工
	      storeId: 0,
	      staffId: 0,
	      ngPid: 0,
	      pid: 0,
	      itemId: 0,
	      // 内购商品列表
	      itemList: [],
	      storeInfo: {},
	      userInfo: {},
	      staffInfo: {},
	      loading: false,
	      error: false,
	      finished: false,
	      p: 1,
	      imgList: [],
	      logP: 1,
	      logList: [],
	      popupInfo: {},
	      // shareInfo: {},
	      shareTip: '',
	      isLoadGood: false,
	      isLoadLog: true,
	      chaNum: 0
	    }
	  },
	  methods: {
	    // 跳转链接名
	    JumpName(name, data) {
	      this.$JumpName(this, name, data)
	    },
	    // 商品价格 整数放大
	    scaleGoodsPriceFn(price, className) {
	      return scaleGoodsPrice(price, className)
	    },
	    init() {
	      const query = this.$route.query
	      this.storeId = query.storeId
	      this.staffId = query.staffId
	      this.ngPid = query.ngPid
	      this.p = 1
	      this.finished = false
	      this.itemList = []
	      this.getUmpNGBaseInfoFn()
	      this.getUmpNGItemListFn()
	    },
	    // 获取基本信息
	    getUmpNGBaseInfoFn() {
	      this.$loadingWrap.show()
	      setTimeout(() => {
	        this.$loadingWrap.close()
	      }, 50000)
	
	      getUmpNGBaseInfo({
	        store_id: this.storeId,
	        staff_id: this.staffId,
	        ng_pid: this.ngPid
	      }).then(res => {
	        this.$loadingWrap.close()
	        if (res.status == 1) {
	          const resData = res.data
	          this.storeInfo = resData.store_info
	          this.userInfo = resData.user_info
	          this.staffInfo = resData.staff_info
	          this.popupInfo = resData.popup
	          this.imgList = resData.img_list
						this.shareTip = resData.jsapi_desc
						if (this.popupInfo.show == 1) {
	            this.isShowLogin = true
	          }
							// TODO 小程序分享
							const option = {
								title: resData.jsapi_title,
								imgUrl: resData.jsapi_img,
								shareParam: resData.jsapi_url.split('?')[1]
							}
							mpShare (true, false, '/activity/pages/internalDetail/index', option,'/internalDetail')

	        } else {
	          this.$Error(res.msg)
	        }
	      })
	    },
	    // 获取企业内购营销商品列表
	    getUmpNGItemListFn() {
	      const params = {
	        store_id: this.storeId,
	        p: this.p
	      }
	      getUmpNGItemList(params).then(res => {
	        this.loading = false
	        if (res.status == 1) {
	          if (res.data.itemList.length > 0) {
	            this.itemList.push(...res.data.itemList)
	            this.p++
	          } else {
	            this.finished = true
	          }
	        } else {
	          this.$Error(res.msg)
	        }
	      }).catch(() => {
	        this.error = true
	      })
	    },
	    // 获取更多内购券弹窗
	    getUmpNGCouponLogFn() {
	      // 第一页清空logList
	      if (this.logP == 1) {
	        this.logList = []
	      }
	      const params = {
	        store_id: this.storeId,
	        p: this.logP
	      }
	      getUmpNGCouponLog(params).then(res => {
	        if (res.status == 1) {
	          if (res.data.logList.length > 0) {
	            this.logList.push(...res.data.logList)
	            this.logP++
	            this.getUmpNGCouponLogFn()
	          }
	        } else {
	          this.$Error(res.msg)
	        }
	      })
			},
			// 关闭登录送内购券弹窗
	    closeShowLogin() {
	      this.isShowLogin = false
	      // 重新获取基本信息
	      this.getUmpNGBaseInfoFn()
	    },
	    // 点击商品
	    navToDetail(item) {
	      this.itemId = item.item_id
	      // 持有的内购券和当前商品所需的内购券对比
	      this.chaNum = Number(item.coupon_num) - Number(this.userInfo.coupon_num)
	      if (this.chaNum <= 0) {
	        this.JumpName('item-detail', { detailId: this.itemId, storeId: this.storeId })
	      } else {
	        this.isShowChaNum = true
	      }
			},
			// 关闭内购券不足弹窗
	    closeShowChaNum() {
	      this.isShowChaNum = false
	    },
	    // 直接购买
	    navToBuyGood() {
	      this.closeShowChaNum()
	      this.JumpName('item-detail', { detailId: this.itemId })
	    },
	    // 点击获取更多内购券
	    showCouponPop() {
	      this.logP = 1
	      this.getUmpNGCouponLogFn()
	      this.isShowCoupon = true
	    },
	    // 关闭获取更多内购券弹窗
	    hideCouponPop() {
	      this.isShowCoupon = false
	    },
			// 认证员工弹窗
	    showStaffPop() {
	      this.isShowStaffPop = true
	    },
	    // 关闭认证员工弹窗
	    closeStaffPop() {
	      this.isShowStaffPop = false
	    },
	    // 邀请分享
	    internalShare() {
				this.isShowCoupon = false
	      this.isShowChaNum = false
	    }
	  },
	  created() {
	    this.init()
		},
		mounted() {
      // 小程序触底加载更多
      window.addEventListener('reachbottom', () => {
        this.getUmpNGItemListFn()
			})
			window.addEventListener('wxshow', () => {
				small.HandleShareParams()
				if (!small.checkLogin()) {
					this.$refs.smalllogin.openSmallLoginPop()
				}
			})
			window.$$subscribe('loginReload', reload => {
				if (reload) {
					this.init()
				}
			})
		},
		beforeDestroy() {
			window.$$unsubscribe('loginReload')
		}
	})
</script>
<style lang="scss">
	.internal-detail{
		.price-scale{
			font-size:28px;
			.num-font{
				font-size:34px;
			}
		}
	}
</style>

<style lang="scss">
	@import "src/styles/mixin.scss";
	.internal-detail {
		.internal-detail-top{
			padding-bottom:34px;
			background:#fff;
		}
		.internal-detail-top-cont {
			position: relative;
			height: 280px;
			overflow: hidden;
			background-size: cover;
			.internal-detail-top-text {
				position: absolute;
				top: 90px;
				left: 50%;
				transform: translateX(-50%);
				width:100%;
				font-size: 66px;
				font-weight: bold;
				text-align:center;
				color: #fff;
				z-index: 1;
			}
		}
		.internal-detail-top-msg {
			width: 100%;
			padding: 30px 20px 20px;
			overflow: hidden;
			box-sizing: border-box;
			background-color: #fff;
			.internal-detail-top-tip {
				width: 100%;
				text-align: center;
				color: #999;
				font-size: 28px;
				.internal-share-num {
					font-weight: bold;
					padding: 0 10px;
					color: #000000;
					font-size: 36px;
				}
			}
		}
		
		.internal-detail-have {
			position: relative;
			margin: 0 24px;
			border-radius: 20px;
			padding: 30px 40px;
			background: linear-gradient(270deg, #E90104 0%, #EE0715 17%, #FE1B49 47%, #FE1B49 100%);
		
			.internal-detail-have-qu {
				color: #fff;
			}
			.internal-detail-have-top {
				font-size: 28px;
				font-weight: bold;
				padding-bottom: 10px;
			
				.internal-detail-have-top-num {
					font-size: 40px;
					padding: 0 10px;
				}
			}
			.internal-detail-have-tip{
				font-size: 22px;
				line-height: 40px;
				opacity: 0.67;
			}
			
			.internal-detail-have-more {
				position: absolute;
				top: 50%;
				right: 20px;
				transform: translateY(-50%);
				.btn-more{
					height:56px;
					padding:0 24px;
					font-size:24px;
					color:#fff;
					border-color:#fff;
					background:transparent;
				}
			}
		}
		
		.internal-top-img-cont {
			padding: 40px 24px;
			overflow: hidden;
			display: flex;
			flex-wrap: nowrap;
			justify-content: center;
			align-items: center;
		
			.top-img-item {
				width: 80px;
				height: 80px;
				border-radius: 50%;
				background-color: #fff;
				img{
					display:block;
					width:100%;
					border-radius: 50%;
				}
				&.top-staff-img {
					position: relative;
					border:2px solid #F0AD4E;
				}
				.top-staff-v {
					position: absolute;
					right: -10px;
					bottom: -10px;
					width: 30px;
					height: 30px;
					background:url("https://img.wifenxiao.com/h5-wfx/images/internal/icon_vip.png") no-repeat;
					background-size:100% 100%;
				}
			}
			.top-img-item-right {
				width:28px;
				height:14px;
				background:url("https://img.wifenxiao.com/h5-wfx/images/internal/icon_arrow.png") no-repeat;
				background-size:100% 100%;
				margin: 0 26px;
			}
			.top-img-item-more{
				display:flex;
				align-items:center;
			}
		}
		
		.top-img-item-share {
			width: 80px;
			height: 80px;
			overflow: hidden;
			border-radius: 50%;
			background:url("https://img.wifenxiao.com/h5-wfx/images/internal/icon_share.png")  center center/30px no-repeat;
			box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.05);
			img{
				width: 30px;
				height: 30px;
				vertical-align: middle;
			}
		}

		// 内购商品列表
		.internal-list-cont {
			margin-top:26px;
			padding: 20px 24px;
			background:#fff;
		
			.internal-list-item{
				display:flex;
				width: 100%;
				padding: 20px 0;
				overflow: hidden;
				border-top: 2px solid #EDEDED;
				&:first-child{
					padding-top:0;
					border:0;
				}
			}
			
			.internal-list-item-img {
				width: 260px;
				height: 260px;
				border-radius: 10px;
				overflow: hidden;
				margin-right: 20px;
				img{
					display:block;
					width:100%;
				}
			}
		
			.internal-list-item-cont {
				flex:1;
				.internal-list-item-title {
					@include lineClamp(28px,42px,2);
				}
		
				.internal-list-item-qu-cont {
					display:inline-block;
					margin-top:20px;
					padding: 6px 16px;
					font-size: 22px;
					text-align: center;
					border-radius:30px;
					color:#F30C23;
					background:#FFF0F1;
				}
			
				.internal-list-item-price {
					display:flex;
					padding: 14px 0 0;
					.internal-list-price-item {
						width: 50%;
						font-size:28px;
						&.qyj {
							color: #F42B2B;
						}
						&.gfj {
							color: #999;
						}
						.price-cont{
							height:50px;
							line-height:50px;
						}
						.price-tip {
							font-size: 22px;
							line-height:32px;
						}
					}	
				}
			}
		}
		// 优惠券弹窗
		.coupon-popup{
			.item-coupon-top {
				padding:40px 0;
				text-align: center;
				font-size: 32px;
				font-weight: bold;
				color: #333;
			}
			.item-coupon-main{
				.item-coupon-share {
					display:flex;
					align-items:center;
					margin:0 24px;
					padding:32px 28px;
					background-color: #f1f1f1;
					border-radius: 20px;
					.item-coupon-share-img{
						width:96px;
						height:96px;
						background:url(https://img.wifenxiao.com/h5-wfx/images/internal/icon_wx.png) no-repeat;
						background-size:100% 100%;
					}
				}
				.item-coupon-share-cont{
					flex:1;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: center;
					margin-left:20px;
					.item-coupon-share-cont-top {
						font-size: 32px;
						font-weight:bold;
						margin-bottom: 10px;
					}
					.item-coupon-share-cont-tip {
						font-size:22px;
						color: #999;
					}
				}
				.item-coupon-share-btn {
					height: 48px;
					padding:0 30px;
					border:0;
					font-size:24px;
					color:#fff;
					background: linear-gradient(270deg, #E90104 0%, #FE1B49 100%, #FE1B49 100%);
					//小程序分享按钮
					&.wx-btn-share{
						border-radius:30px;
					}
				}
			
				.item-coupon-list-title {
					text-align: center;
					padding: 60px 0 20px;
					font-size: 28px;
					color:#999;
				}
				// 内购券记录
				.item-coupon-list-cont {
					padding:0 24px;
					.item-coupon-list-item {
						display:flex;
						justify-content: space-between;
						align-items: center;
						padding: 40px 0 30px;
						border-bottom: 2px solid #EDEDED;
					}
					.item-coupon-list-item-title {
						font-size: 28px;
						color:#333;
					}
					.item-coupon-list-item-time {
						margin-top:16px;
						font-size:24px;
						color: #999;
					}
					.item-coupon-list-item-quan {
						font-size:28px;
						font-weight: bold;
						color: #FD2049;
					}
				}
			}
		}
		// 内购券不足时弹窗
		.cha-num-popup,.login-num-popup{
			width:534px;
			background:transparent;
			.ngq-pop-cont {
				border-radius: 20px;
				background-color: #fff;
				text-align: center;
			
				.ngq-pop-cont-top {
					text-align: center;
				}
				.ngq-pop-cont-top-title {
					font-size: 32px;
					font-weight: bold;
					padding: 40px 0 30px;
				}
				.ngq-pop-cont-top-tip {
					color: #999;
				}
				.ngq-pop-cont-img {
					width: 360px;
					height:210px;
					margin:30px auto 50px;
					background:url(https://img.wifenxiao.com/h5-wfx/images/internal/icon_chanum.png) no-repeat;
					background-size:100% 100%;
				}
				.ngq-pop-cont-btn {
					text-align: center;
					border-top: 2px solid #f2f2f2;
					color: #f50;
					padding: 20px 0;
					font-size: 28px;
				}
				.nav-pop-cont-btn {
					padding-bottom:60px;
					.btn{
						width:400px;
						height:70px;
						font-size:24px;
						&.btn-share,&.btn-know{
							border:0;
							color:#fff;
							background: linear-gradient(270deg, #E90104 0%, #FE1B49 100%, #FE1B49 100%);
						}
						//小程序分享按钮
						&.wx-btn-share{
							line-height:70px;
							border-radius:30px;
						}
						&.btn-buy{
							margin-top:30px;
							border-color:#F30C23;
							color:#F30C23;
						}
					}
				}
			}
			.ngq-pop-close{
				width:60px;
				height:60px;
				margin:32px auto 0;
				background:url(https://img.wifenxiao.com/h5-wfx/images/dialog_close.png) no-repeat;
				background-size:100% 100%;
			}
		}
		// 认证员工弹窗
		.staff-popup{
			width:534px;
			background:transparent;
			.ng-staff-cont{
				padding:60px 20px 40px;
				border-radius: 20px;
				background:#fff;
				text-align: center;
				.ng-staff-img{
					width:146px;
					height:146px;
					margin:0 auto;
					box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.05);
					border-radius:50%;
					img{
						display:block;
						width:146px;
						height:146px;
						border: 2px solid #E0BC80;
						border-radius:50%;
					}
				}
				.ng-pop-cont-top-title{
					margin-top:12px;
					font-size:32px;
					font-weight: bold;
					line-height:44px;
				}
				.ng-pop-cont-top-tip{
					margin-top:6px;
					color:#999;
					line-height:1.5;
				}
				.ng-pop-cont-btn{
					width:400px;
					height:70px;
					margin-top:60px;
					border:0;
					font-size:24px;
					color:#fff;
					background: linear-gradient(270deg, #E90104 0%, #FE1B49 100%, #FE1B49 100%);
				}
			}
			.ng-pop-close{
				width:60px;
				height:60px;
				margin:32px auto 0;
				background:url(https://img.wifenxiao.com/h5-wfx/images/dialog_close.png) no-repeat;
				background-size:100% 100%;
			}
		}
	}
</style>
